<template>
  <div class="app-page">
    <!-- 标题 -->
    <div class="app-header">
      <div class="app-title">
        <i :class="$route.meta.icon"></i>  {{ $route.meta.title }}
      </div>
      <div class="app-tools">
        <el-button icon="fa fa-filter" size="small" @click="showSearch = !showSearch">
          {{ showSearch?'隐藏':'查询' }}
        </el-button>
        <el-button icon="fa fa-angle-double-down" size="small" @click="expendAll">
          展开
        </el-button>
        <el-button icon="fa fa-angle-double-up" size="small" @click="closeAll">
          折叠
        </el-button>
        <el-button icon="fa fa-plus" size="small" @click="goRouterView('/menu/add')">
          添加
        </el-button>
      </div>
    </div>
    <!-- 内容 -->
    <div class="app-body">
      <!-- 搜索 -->
      <el-form
        v-if="showSearch"
        ref="form"
        :model="searchForm"
        size="small"
        inline
        class="app-search-form"
        label-width="80px"
      >
        <el-form-item label="菜单名称">
          <el-input v-model="searchForm.name" placeholder="请输入" clearable style="width:200px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query(searchForm)">
            查询
          </el-button>
          <el-button @click="resetForm">
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <div v-auto-height class="app-table-box">
        <el-table
          ref="treeTable"
          v-loading="tableLoading"
          :data="tableData"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          row-key="_id"
          border
          height="100%"
          style="width: 100%"
        >
          <el-table-column type="index" width="70" align="center" label="序号" />
          <el-table-column prop="name" align="left" label="菜单名称" show-overflow-tooltip>
            <template slot-scope="scope">
              <svg-icon v-if="scope.row.icontype ===1" slot="prefix" :icon-class="scope.row.icon" class-name="svg-icon" style="color:#333" />
              <i v-else-if="scope.row.icontype ===2" slot="prefix" :class="scope.row.icon" style="color:#333"></i>
              <span style="margin-left:10px">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="url" align="left" label="链接" show-overflow-tooltip></el-table-column>
          <el-table-column prop="sort" align="center" label="排序" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.sort" :step="1" size="mini" style="width:150px" @change="updateSortRow(scope.row._id,scope.row.sort)"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="visible" align="center" label="显示" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.visible" style="color:green;">显示</span>
              <span v-else style="color:grey;">隐藏</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="250">
            <template slot-scope="scope">
              <el-button type="text" class="primary-color" size="medium" @click="goRouterView(`/edit?uuid=${scope.row.uuid}`)">
                编辑
              </el-button>
              <el-button type="text" class="danger-color" size="medium" @click="delRow(scope.row.uuid)">
                删除
              </el-button>
              <el-button type="text" class="primary-color" size="medium" @click="goRouterView(`/menu/add?pid=${scope.row._id}&pname=${scope.row.name}`)">
                增加子分类
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
// import { menuListall, menuRemove, menuUpdateSort } from '@/api/menu.js'
import { getData, remove, update } from '@/mock/index'
// 搜索分页表
import tableSearchMixin from '@/mixins/tableSearch.js'

import { arrayToTree, sortTreeByField } from '@/utils/tree.js'
export default {
  name: 'ListTableSearchTree',
  mixins: [tableSearchMixin],
  data () {
    return {
    }
  },
  created () {
    this.getTableData()
  },
  methods: {
    // 获取列表
    async getTableData (searchForm = this.searchForm) {
      this.tableLoading = true
      // 模拟表格数据
      const tableData = [
        {
          url: '/admin/list',
          visible: true,
          parent_id: '',
          icon: 'home',
          icontype: 1,
          sort: 1,
          type: true,
          status: '0',
          remarks: '',
          _id: '5e6603617bbcd20814cd335f',
          name: '管理员管理',
          __v: 0
        },
        {
          url: '/news/list',
          visible: true,
          parent_id: '5e6603917bbcd20814cd3361',
          icon: 'nested',
          icontype: 1,
          sort: 1,
          type: true,
          status: '0',
          remarks: '',
          _id: '5e6603aa7bbcd20814cd3362',
          name: '新闻列表',
          __v: 0
        },
        {
          url: '/product/list',
          visible: true,
          parent_id: '5e675ea0e600633fa868a0d4',
          icon: 'table',
          icontype: 1,
          sort: 1,
          type: true,
          status: '0',
          remarks: '',
          _id: '5e675f04e600633fa868a0d6',
          name: '产品列表',
          __v: 0
        },
        {
          url: '/product/category/list',
          visible: true,
          parent_id: '5e675ea0e600633fa868a0d4',
          icon: 'logout',
          icontype: 1,
          sort: 1,
          type: true,
          status: '0',
          remarks: '',
          _id: '5e675fcae600633fa868a0d8',
          name: '产品分类',
          __v: 0
        },
        {
          url: '/file/list',
          visible: true,
          parent_id: '5e683b40facbc11e140624a0',
          icon: 'nested',
          icontype: 1,
          sort: 1,
          type: true,
          status: '0',
          remarks: '',
          _id: '5e683b5dfacbc11e140624a1',
          name: '文件列表',
          __v: 0
        },
        {
          url: '/menu/list',
          visible: true,
          parent_id: '',
          icon: 'el-icon-menu',
          icontype: 2,
          sort: 2,
          type: true,
          status: '0',
          remarks: '',
          _id: '5e6602e07bbcd20814cd335e',
          name: '菜单管理',
          __v: 0
        },
        {
          url: '/news/category',
          visible: true,
          parent_id: '5e6603917bbcd20814cd3361',
          icon: 'el-icon-tickets',
          icontype: 2,
          sort: 2,
          type: true,
          status: '0',
          remarks: '',
          _id: '5e675ee2e600633fa868a0d5',
          name: '新闻分类',
          __v: 0
        },
        {
          url: '/file/category/list',
          visible: true,
          parent_id: '5e683b40facbc11e140624a0',
          icon: 'tree',
          icontype: 1,
          sort: 2,
          type: true,
          status: '0',
          remarks: '',
          _id: '5e683b7efacbc11e140624a2',
          name: '图片分类',
          __v: 0
        },
        {
          url: '/about/list',
          visible: true,
          parent_id: '',
          icon: 'el-icon-service',
          icontype: 2,
          sort: 3,
          type: true,
          status: '0',
          remarks: '',
          _id: '5e6603707bbcd20814cd3360',
          name: '关于我们',
          __v: 0
        },
        {
          url: '/news',
          visible: true,
          parent_id: '',
          icon: 'el-icon-info',
          icontype: 2,
          sort: 4,
          type: true,
          status: '0',
          remarks: '',
          _id: '5e6603917bbcd20814cd3361',
          name: '新闻管理',
          __v: 0
        },
        {
          url: '/product',
          visible: true,
          parent_id: '',
          icon: 'tree',
          icontype: 1,
          sort: 5,
          type: true,
          status: '0',
          remarks: '',
          _id: '5e675ea0e600633fa868a0d4',
          name: '产品中心',
          __v: 0
        },
        {
          url: '/file/list',
          visible: true,
          parent_id: '',
          icon: 'el-icon-document',
          icontype: 2,
          sort: 8,
          type: true,
          status: '0',
          remarks: '',
          _id: '5e683b40facbc11e140624a0',
          name: '文件管理',
          __v: 0
        }
      ]
      const res = await getData(searchForm, tableData)
      this.tableLoading = false
      if (res.code === '0000') {
        const treeData = arrayToTree(res.data, [], '_id', 'parent_id')
        this.tableData = sortTreeByField(treeData, 'sort')
      }
    },
    // 删除
    delRow (id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await remove({ id })
        if (res.code === '0000') {
          this.$message({
            type: 'success',
            message: res.message
          })
          // 更新表格
          this.getTableData()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 修改排序
    async updateSortRow (id, sort) {
      const res = await update({ id, sort })
      if (res.code === '0000') {
        this.$message({
          type: 'success',
          message: res.message
        })
      }
    },
    // 展开所有节点
    expendAll () {
      const treeDom = this.$refs.treeTable
      this.expendArray(this.tableData, treeDom, true)
    },
    expendArray (arr, treeDom, expend) {
      arr.forEach((row, index) => {
        treeDom.toggleRowExpansion(row, expend)
        if (row.children && row.children.length > 0) {
          this.expendArray(row.children, treeDom, expend)
        }
      })
    },
    // 折叠所有节点
    closeAll () {
      const treeDom = this.$refs.treeTable
      this.expendArray(this.tableData, treeDom, false)
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
</style>
